<template>
  <vxe-grid
    ref="gridRef3"
    v-bind="gridOptions2"
    @toolbar-tool-click="toolbarToolClickEvent"
    @form-submit="formSubmitEvent"
    @form-reset="formResetEvent"
  >
    <template #expand_content="{ row: row1 }">
      <vxe-grid v-bind="childGridOptions" :data="row1.valueList" ref="gridRef">
        <template #default_value="{ row }">
          <span> {{ row.value == null ? "" : row.value }}</span>
        </template>
        <template #edit_value="{ row }">
          <vxe-number-input v-model="row.value" type="float">
          </vxe-number-input>
          <!-- <vxe-number-input
            v-model="row.value"
            type="float"
            :min="row.lowerTolerance"
            :max="row.upperTolerance"
          >
          </vxe-number-input> -->
        </template>

        <template #edit_value2="{ row }">
          <vxe-select
            v-if="row1.failurePattern == '是'"
            v-model="row.value2"
            :options="sexOptions"
          ></vxe-select>
          <span v-else> 不可填写</span>
        </template>
        <template #default_value2="{ row }">
          <span v-if="row1.failurePattern == '是'">
            {{ row.value2 == null ? "请填写" : row.value2 }}</span
          >

          <span v-else class="father"> 不可填写</span>
        </template>
      </vxe-grid>
    </template>

    <template #default_tolerance="{ row }">
      <!-- <div class="father"> -->
      <div class="father">
        <span v-if="row.standardToleranceOne == '是'">{{
          row.toleranceOneDesc +
          ":" +
          row.lowerToleranceOne +
          ";" +
          row.upperToleranceOne
        }}</span>
      </div>
      <div class="father">
        <span v-if="row.standardToleranceTwo == '是'">
          {{
            row.toleranceTwoDesc +
            ":" +
            row.lowerToleranceTwo +
            ";" +
            row.upperToleranceTwo
          }}
        </span>
      </div>
      <!-- </div> -->
    </template>
    <template #edit_value="{ row }">
      <!-- <div class="father"> -->
      <vxe-select
        v-if="row.qualified == '是'"
        v-model="row.value"
        :options="resultOptions"
      ></vxe-select>
      <span v-else class="father"> 不可填写</span>
      <!-- </div> -->
    </template>
    <template #default_value="{ row }">
      <span v-if="row.qualified == '是'">
        {{ row.value == null ? "请填写" : row.value }}</span
      >
      <span v-else class="father"> 不可填写</span>
    </template>

    <template #active="{ row }">
      <!-- <vxe-button
        mode="text"
        status="primary"
        content="更多填写"
        v-show="row.fillQty > 3"
        icon="vxe-icon-edit"
        @click="moreFillData(row)"
      ></vxe-button> -->
      <vxe-button
        mode="text"
        status="primary"
        content="添加值"
        icon="vxe-icon-edit"
        @click="addFillQty(row)"
      ></vxe-button>
      <vxe-button
        mode="text"
        status="primary"
        content="复制项"
        icon="vxe-icon-edit"
        @click="addFillItem(row)"
      ></vxe-button>
    </template>
  </vxe-grid>
</template>
<script>
import XEUtils, { first } from "xe-utils";
import { fi } from "element-plus/es/locale/index.mjs";
import {
  getInspectionTaskByPage,
  addInspectionTask,
  addInspectionTasks,
  delInspectionTask,
  uploadFile,
  getValueTmpByTaskId,
  fillInspectionTaskValue,
  getInspectionTaskTemplateSamplingItemByPage,
  fillInspectionSamplingTaskValue,
  fillInspectionTaskValueExt,
  addInspectionTaskValues,
  copyInspectionTaskTemplateSamplingItem,
} from "@/api/quality/inspectionTask";
export default {
  name: "TmpSampItem",
  props: {
    rowData: {
      type: Object,
      default: () => {
        return { id: 0, fillType: "性能", materialCode: "" };
      },
    },
  },
  watch: {
    // "rowData.id": {
    //   immediate: true,
    //   deep: true,
    //   handler(val, oldVal) {
    //     setTimeout(() => {
    //       this.selectData.id = val;
    //       this.$refs.gridRef3.commitProxy("reload");
    //     }, 100);
    //   },
    // },
  },
  data() {
    const rowList = [
      {
        id: 10041,
        name: "Test456456 456456456456456456",
        role: "Designer",
        sex: "Man",
        age: 19,
        address: "test 3444444",
      },
      {
        id: 10042,
        name: "Test457",
        role: "Test",
        sex: "Women",
        age: 29,
        address: "rtyty sdfsdf",
      },
    ];
    const gridOptions2 = {
      editConfig: {
        trigger: "click",
        mode: "cell",
        // beforeEditMethod({ row }) {
        //   // name 为 'x' 开头的列禁止编辑
        //   if ((row.name || "").indexOf("x") === 0) {
        //     return false;
        //   }
        //   // age 小于 27 的列禁止编辑
        //   if (row.age < 27) {
        //     return false;
        //   }
        //   // sex 值编辑为 1 的列禁止编辑
        //   if (row.sex === "Women") {
        //     return false;
        //   }
        //   return true;
        // },
      },
      sortConfig: {
        remote: true,
      },
      loading: false,
      stripe: true,
      showOverflow: true,
      showFooter: true,
      height: "100%",
      // columnConfig: {
      //   resizable: true,
      //   drag: true,
      // },
      columnDragConfig: {
        trigger: "cell",
        showIcon: false,
        showGuidesStatus: true,
      },
      rowConfig: {
        isHover: true,
      },
      resizableConfig: {
        isDblclickAutoWidth: true,
      },
      pagerConfig: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
      },
      toolbarConfig: {
        tools: [
          { name: "查询", code: "mySearch", status: "primary" },
          // { name: "删除", code: "del", status: "error" },
          { name: "保存", code: "mySave", status: "success" },
          // { name: "新增", code: "mySave", status: "success" },
        ],
      },

      // formConfig: {
      //   data: {
      //     name: "",
      //     role: "",
      //     sex: "",
      //     num: "",
      //     address: "",
      //   },
      //   items: [
      //     {
      //       field: "name",
      //       title: "名称",
      //       span: 6,

      //       itemRender: { name: "VxeInput", props: { clearable: true } },
      //     },
      //     {
      //       field: "code",
      //       title: "编码",
      //       span: 6,

      //       itemRender: { name: "VxeInput", props: { clearable: true } },
      //     },

      //     {
      //       field: "createTime",
      //       title: "时间",
      //       span: 6,

      //       itemRender: {
      //         name: "VxeDatePicker",
      //         props: {
      //           multiple: true,
      //           clearable: true,
      //         },
      //       },
      //     },

      //     {
      //       align: "right",
      //       span: 6,
      //       itemRender: {
      //         name: "VxeButtonGroup",
      //         options: [
      //           { type: "submit", content: "搜索", status: "primary" },
      //           { type: "reset", content: "重置" },
      //         ],
      //       },
      //     },
      //   ],
      // },
      columns: [
        { type: "checkbox", width: 60 },
        // { field: "fillType", title: "分类", width: 70 },
        {
          field: "inspectionItemName",
          title: "检验项",
          sortable: true,
          width: 180,
        },
        { field: "fillQty", title: "检验量", width: 80 },
        { field: "sequence", title: "序列号", width: 80 },
        {
          field: "samplingName",
          title: "抽样方案",
          width: 100,
        },
        {
          field: "toleranceDesc",
          title: "公差备注",
          slots: { default: "default_tolerance" },
          width: 100,
        },
        {
          type: "expand",
          title: "数据填写",
          width: 100,
          slots: { content: "expand_content" },
        },
        // {
        //   type: "expand",
        //   title: "公差2",
        //   width: 60,
        //   slots: { content: "expand_content2" },
        // },
        {
          field: "value",
          title: "是否合格",
          editRender: {},
          // editRender: { name: "VxeInput" },
          slots: { edit: "edit_value", default: "default_value" },
          width: 100,
        },
        // {
        //   field: "value2",
        //   title: "值1_2",
        //   editRender: {},
        //   // editRender: { name: "VxeInput" },
        //   slots: { edit: "edit_value2", default: "default_value2" },
        //   // slots: { edit: "value2" },
        //   width: 100,
        // },
        // {
        //   field: "value3",
        //   title: "值1_3",

        //   editRender: {},
        //   width: 100,
        //   // editRender: { name: "VxeInput" },
        //   slots: { edit: "edit_value3", default: "default_value3" },
        //   slots: { edit: "value3" },
        // },
        // {
        //   field: "value21",
        //   title: "值2_1",

        //   editRender: {},
        //   width: 100,
        //   // editRender: { name: "VxeInput" },
        //   slots: { edit: "edit_value3", default: "default_value3" },
        //   slots: { edit: "value3" },
        // },
        // {
        //   field: "value22",
        //   title: "值2_2",

        //   editRender: {},
        //   width: 100,
        //   // editRender: { name: "VxeInput" },
        //   slots: { edit: "edit_value3", default: "default_value3" },
        //   slots: { edit: "value3" },
        // },

        // {
        //   field: "value23",
        //   title: "值2_3",

        //   editRender: {},
        //   width: 100,
        //   // editRender: { name: "VxeInput" },
        //   slots: { edit: "edit_value3", default: "default_value3" },
        //   slots: { edit: "value3" },
        // },

        {
          field: "active",
          title: "操作",
          fixed: "right",
          width: 300,
          slots: { default: "active" },
        },
      ],
      scrollX: {
        gt: 0,
        enabled: true,
      },
      scrollY: {
        gt: 0,
        enabled: true,
      },
      proxyConfig: {
        // props: {
        //   result: 'result', // 配置响应结果列表字段
        //   total: 'page.total' // 配置响应结果总页数字段
        // },

        sort: true,
        form: true,
        ajax: {
          query: async ({ page, sorts, form }) => {
            console.log(page, sorts, form, "----");
            // 默认接收 Promise<{ result: [], page: { total: 100 } }>
            let result = await getInspectionTaskTemplateSamplingItemByPage({
              ...page,
              ...form,
              inspectionTaskId: this.selectData.id,
              fillType: this.selectData.fillType,
              materialCode: this.selectData.materialCode,
            });
            return {
              result: result.data.records,
              page: {
                total: result.data.total,
              },
            };
          },
        },
      },
    };
    const childGridOptions = {
      editConfig: {
        trigger: "click",
        mode: "cell",
        showStatus: true,
        // beforeEditMethod({ row }) {
        //   // name 为 'x' 开头的列禁止编辑
        //   if ((row.name || "").indexOf("x") === 0) {
        //     return false;
        //   }
        //   // age 小于 27 的列禁止编辑
        //   if (row.age < 27) {
        //     return false;
        //   }
        //   // sex 值编辑为 1 的列禁止编辑
        //   if (row.sex === "Women") {
        //     return false;
        //   }
        //   return true;
        // },
      },
      columnConfig: {
        resizable: true,
        drag: true,
      },
      editRules: {
        value: [
          { required: true, content: "必须填写" },
          {
            validator({ cellValue, row }) {
              console.log(cellValue, row);
              if (
                cellValue &&
                (cellValue < row.lowerTolerance ||
                  cellValue > row.upperTolerance)
              ) {
                return new Error(
                  "填写值进度在[" +
                    row.lowerTolerance +
                    "-" +
                    row.upperTolerance +
                    "]"
                );
              }
            },
          },
        ],
      },
      width: "20%",
      border: true,
      columns: [
        { field: "name", title: "名称", witdh: 100 },
        {
          field: "value",
          title: "公差值",
          editRender: {},
          slots: { edit: "edit_value", default: "default_value" },
        },
        {
          field: "fault",
          title: "失效模式",

          editRender: {},
          slots: { edit: "edit_value2", default: "default_value2" },
        },
      ],
    };
    const sexOptions = [
      { label: "失效", value: "失效" },
      { label: "不失效", value: "不失效" },
    ];
    const resultOptions = [
      { label: "合格", value: "合格" },
      { label: "不合格", value: "不合格" },
    ];
    return {
      gridOptions2,
      childGridOptions,
      selectData: this.rowData,
      sexOptions,
      resultOptions,
      rowList,
    };
  },
  methods: {
    async toolbarToolClickEvent(params) {
      console.log("===>查询===");
      if (params.code == "mySave") {
        try {
          // console.log(this.$refs.gridRef3.getFullData());
          await addInspectionTaskValues(this.$refs.gridRef3.getFullData());
        } catch (error) {
        } finally {
          const $grid = this.$refs.gridRef3.commitProxy("reload");
        }
        // this.$refs.gridRef.getFullData();
        // const $grid = this.$refs.gridRef3.commitProxy("reload");
      } else if (params.code == "mySearch") {
        const $grid = this.$refs.gridRef3.commitProxy("reload");
      }
      // console.log(this.$refs.gridRef3.getFullData());
    },
    formSubmitEvent() {},
    formResetEvent() {},
    async addFillQty(row) {
      const $grid = this.$refs.gridRef;
      const record = {
        name: `Name_${new Date().getTime()}`,
      };
      row.valueList.push(record);
    },
    async addFillItem(row) {
      try {
        await copyInspectionTaskTemplateSamplingItem(row);
      } catch {
      } finally {
        const $grid = this.$refs.gridRef3.commitProxy("reload");
      }

      // const record = {
      //   name: `Name_${new Date().getTime()}`,
      // };
    },
  },
};
</script>
<style scoped lang="scss">
.father {
  display: flex;
  align-items: flex-start;
  // justify-content: center;

  // overflow: auto;
  color: red;
}
</style>
